<template>
  <div id="xq">
    <div id="xq-header">
      <p @click="mixins">&lt;</p>
      <p>...</p>
    </div>
    <div id="xq-1">
      <img
        src="https://www.chawo.com/data/upload/shop/store/goods/2/2019/01/2_05999364496194725_360.jpg"
      />
    </div>
    <div id="xq-2">
      <div id="xq-2-1">
        <div id="xq-2-1-1">
          <div class="lt">
            <span>￥9.50</span>
            <span>￥10.80</span>
          </div>
          <div class="rt">
            <span>销量:65158沱</span>
          </div>
        </div>
        <div id="xq-2-1-2">
          <p>2017年普秀甲沱生茶100克/沱1沱(ocY)</p>
        </div>
        <div id="xq-2-1-3">
          <span>入门优选</span>
        </div>
      </div>
      <div id="xq-2-2">
        <div id="xq-2-2-l">
          <span>活动</span>
          <span>你有代金券可以领取</span>
        </div>
        <div id="xq-2-2-r">
          <span>&gt;</span>
        </div>
      </div>
      <div id="xq-2-3">
        <div id="xq-2-3-1">
          <div class="lt">
            <span>已选</span>
            <span>1沱</span>
          </div>
          <div class="rt">
            <span>&gt;</span>
          </div>
        </div>
        <div id="xq-2-3-2">
          <div class="lt">
            <span>参数</span>
            <span>品牌、年份、工艺、形状</span>
          </div>
          <div class="rt">
            <span>&gt;</span>
          </div>
        </div>
        <div id="xq-2-3-3">
          <ul>
            <li>
              <p>
                <img src="https://www.chawo.com/wap/static/base_img/bz01.png" />
              </p>
              <span>正品保障</span>
            </li>
            <li>
              <p>
                <img src="https://www.chawo.com/wap/static/base_img/bz03.png" />
              </p>
              <span>售后保障</span>
            </li>
            <li>
              <p>
                <img src="https://www.chawo.com/wap/static/base_img/bz04.png" />
              </p>
              <span>货到付款</span>
            </li>
            <li>
              <p>
                <img src="https://www.chawo.com/wap/static/base_img/bz02.png" />
              </p>
              <span>满99包邮</span>
            </li>
          </ul>
        </div>
      </div>
      <div id="spxq">
        <p></p>
        <span>商品详情</span>
        <p></p>
      </div>
    </div>
    <div id="spxq-1">
      <img
        src="	https://www.chawo.com/data/upload/shop/store/goods/2/2021/12/2_06919454300465847.jpg?special_id=20"
      />
      <img
        src="	https://www.chawo.com/data/upload/shop/store/goods/2/2021/12/2_06926378194837783.jpg?"
      />
      <img
        src="https://www.chawo.com/data/upload/shop/store/goods/2/2021/12/2_06926378195057645.jpg?goods_id=110896"
      />
      <img
        src="	https://www.chawo.com/data/upload/shop/store/goods/2/2021/12/2_06926378195168101.jpg?goods_id=110897"
      />
      <img
        src="https://www.chawo.com/data/upload/shop/store/goods/2/2021/12/2_06926378195183363.jpg?goods_id=110899"
      />
      <img
        src="https://www.chawo.com/data/upload/shop/store/goods/2/2021/12/2_06919454300213739.jpg?https://www.chawo.com/wap/miaosha.html?spike=1"
      />
      <img
        src="https://www.chawo.com/data/upload/shop/store/goods/2/2016/04/2_05131952519001234_1280.jpg"
      />
      <img src="" />
      <span style="font-size: 24px; color: #e56600">
        <strong> 2017年普秀&nbsp;甲沱 </strong>
      </span>
      <span>品名：甲沱</span>
      <br />
      <span>品牌：普秀</span>
      <span>年份：2017年</span>
      <br />
      <span>工艺:生茶</span>
      <br />
      <span>规格:100克/沱，5沱/包，200沱/件</span>
      <br />
      <span>储存:在通风、干燥无异味、常温环境下存储</span>
    </div>
    <div id="spxq-footer">
        <div id="spxq-footer-l">
            <ul>
                <li>
                    <span class="iconfont icon-liebiao"></span>
                    <p>首页</p>
                </li>
                <li>
                    <span class="iconfont icon-shoucang"></span>
                    <p>收藏</p>
                </li>
                <li>
                    <span class="iconfont icon-gouwuchexuanzhong"></span>
                    <p>购物车</p>
                </li>
            </ul>
        </div>
        <div id="spxq-footer-r">
            <button>加入购物车</button>
            <button>立即购买</button>
        </div>
    </div>
  </div>
</template>

<script>
import Xq from "../mixins/index.js"
export default {
    mixins: [Xq]
};
</script>

<style>
#xq {
  width: 100%;
}
#xq-header {
  width: 100%;
  height: 0.45rem;
  line-height: 0.45rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 0.2rem;
  position: fixed;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
}
#xq-header p {
  width: 0.3rem;
  height: 0.3rem;
  line-height: 0.3rem;
  border-radius: 50%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  align-self: center;
  font-size: 0.2rem;
}
#xq-1 {
  width: 100%;
  height: 3.75rem;
}
#xq-1 img {
  width: 100%;
  height: 100%;
}
#xq-2 {
  width: 100%;
  padding: 0.1rem;
  background-color: gainsboro;
}
#xq-2-1 {
  background-color: white;
  border-radius: 0.03rem;
}
#xq-2-1-1 {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0.1rem 0 0.1rem;
  font-size: 14px;
  line-height: 27px;
  color: #606266;
}
#xq-2-1-1 .lt span:nth-of-type(1) {
  font-size: 0.2rem;
  color: #c9141c;
  font-weight: 600;
  margin-right: 0.15rem;
}
#xq-2-1-1 .lt span:nth-of-type(2) {
  font-size: 0.14rem;
  text-decoration: line-through;
}
#xq-2-1-1 .rt {
  color: #000;
  font-size: 0.14rem;
}
#xq-2-1-2 {
  padding: 0.1rem;
  width: auto;
  font-size: 16px;
  font-weight: bold;
  color: black;
}
#xq-2-1-3 {
  padding-left: 0.1rem;
}
#xq-2-1-3 span {
  font-size: 10px;
  padding: 1px 3px;
  border-radius: 3px;
  border: 1px solid #c9141c;
  margin: 0 2px 5px 2px;
  display: inline-block;
  color: #c9141c;
}
#xq-2-2 {
  width: 100%;
  padding: 0.1rem;
  display: flex;
  justify-content: space-between;
  background-color: white;
  margin-top: 0.15rem;
  border-radius: 0.03rem;
}
#xq-2-2-1 {
  display: flex;
}
#xq-2-2-l span:nth-of-type(1) {
  font-size: 0.14rem;
  margin-right: 0.25rem;
}
#xq-2-2-l span:nth-of-type(2) {
  font-size: 0.14rem;
  color: #c9141c;
}
#xq-2-2-r span {
  font-size: 0.2rem;
}
#xq-2-3 {
  width: 100%;
  padding: 0 0.1rem;
  background-color: white;
  border-radius: 0.03rem;
  margin-top: 0.15rem;
}
#xq-2-3-1 {
  padding: 0.1rem 0;
  display: flex;
  justify-content: space-between;
}
#xq-2-3-1 .lt span:nth-of-type(1) {
  font-size: 0.14rem;
  font-weight: 700;
  margin-right: 0.15rem;
}
#xq-2-3-1 .rt span {
  font-size: 0.2rem;
}
#xq-2-3-2 {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
}
#xq-2-3-2 .lt span:nth-of-type(1) {
  font-size: 0.14rem;
  font-weight: 700;
  margin-right: 0.15rem;
}
#xq-2-3-2 .lt span:nth-of-type(2) {
  font-size: 0.14rem;
}
#xq-2-3-2 .rt span {
  font-size: 0.2rem;
}
#xq-2-3-3 {
  width: 100%;
  border-top: 0.01rem solid gainsboro;
  padding: 0.1rem 0.1rem;
}
#xq-2-3-3 ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#xq-2-3-3 ul li {
  display: flex;
  justify-content: space-between;
}
#xq-2-3-3 ul li p {
  margin-right: 0.05rem;
}
#xq-2-3-3 ul li img {
  width: 0.11rem;
  height: 0.11rem;
}
#xq-2-3-3 ul li span {
  font-size: 0.12rem;
  color: #8c8c8c;
}
#spxq {
  padding: 0.05rem 0;
  display: flex;
  justify-content: center;
  margin: 0.1rem 0;
}
#spxq p {
  width: 0.6rem;
  height: 0.02rem;
  background-color: gray;
  margin-top: 0.1rem;
}
#spxq span {
  color: rgb(144, 147, 153);
  font-size: 16px;
  margin: 0 0.08rem;
}
#spxq-1 {
  width: 100%;
}
#spxq-1 img {
  width: 100%;
  display: block;
}
#spxq-1 span {
  font-size: 0.18rem;
}
#spxq-footer {
  width: 100%;
  height: 0.45rem;
  background-color: white;
  position: fixed;
  bottom: 0;
  z-index: 99;
  padding-left: .15rem;
  padding-right: .1rem;
  display: flex;
  justify-content: space-between;
}
#spxq-footer-l ul{
    display: flex;
    justify-content: space-between;
}
#spxq-footer-l ul li{
    text-align: center;
    margin: auto;
    font-size: .14rem;
    margin-right: .05rem;
}
#spxq-footer-l ul li span{
    font-size: .2rem;
}
#spxq-footer-r{
    display: flex;
    font-size: .14rem;
}
#spxq-footer-r button{
    margin: 6px 5px;
    line-height: 38px;
    border-radius: 18px;
    color: #fff;
    text-align: center;
    width: .9rem;
    border: none;
}
#spxq-footer-r button:nth-of-type(1){
    background-color: #ff7900;
}
#spxq-footer-r button:nth-of-type(2){
    background-color: #ed3f14;
}
</style>